<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 这里使用了APP组件, Vue中可以不定义template -->
        <App/>
    </div>
    <script src="./vue.js"></script>
    <script>

        // 创建一个bus
        let bus = new Vue();

        // A ===> B  A的数据传递给B, B要使用$on('事件的名称', function(val){}) 声明事件, A要触发事件 $emit('事件的名称', '值')
        // 这两个方法必须绑定在同一个实例化对象中, 一般称这个实例化对象为Bus
        // 全局组件
        Vue.component('Test2', {
            data() {
                return {
                    text:""
                }
            },
            template: `
                <h2>{{ text }}</h2>
            `,
            methods: {},
            created() {
                // 声明事件
                // testData 事件名
                // 函数为要执行的逻辑, val为传递的参数
                // 不能使用this.$on, 这里的this是Test2对象, 和触发事件的对象不是同一个对象, 得使用创建的bus对象
                bus.$on('testData', (val) => {
                    this.text = val
                })
            },
        });

        Vue.component('Test', {
            data() {
                return {
                    msg: '我是子组件数据'
                }
            },
            template: `
                <button @click='clickHandler'>传递</button>
            `,
            methods: {
                clickHandler() {
                    // 不能使用this.$emit, 这里的this是Test对象, 和触发事件的对象不是同一个对象, 得使用创建的bus对象
                    bus.$emit('testData', this.msg);
                }
            },
        });

        let Vheader = {
            // 组件中的data必须是函数
            data() {
                return {
                }
            },
            template: `
                <div class="header">
                    <Test />
                    <Test2 />
                </div>
            `,
        };

        let App = {
            // 组件中的data必须是函数
            data() {
                return {
                }
            },
            template: `
                <div class="app">
                    <Vheader/>
                </div>
            `,
            // 挂载组件
            components: {
                Vheader
            }
        };

        new Vue({
            el:'#app',
            data() {
                return {

                }
            },
            // 挂载组件
            components: {
                App
            }
        });
    </script>
</body>
</html>